import React from "react";

// 错误边界 不能检测自身，只能检测其他子组件

// 1.先创建
class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error) {
      // 更新 state 使下一次渲染能够显示降级后的 UI
      return { hasError: true };
    }
  
    componentDidCatch(error, errorInfo) {
      // 你同样可以将错误日志上报给服务器
    //   logErrorToMyService(error, errorInfo);
    console.log('error',error,errorInfo)
    }
  
    render() {
      if (this.state.hasError) {
        // 你可以自定义降级后的 UI 并渲染 
        return <h1>可能发生了错误</h1>;
      }
  
      return this.props.children; 
    }
  }

  class Doom extends React.Component{
    render(){
        try{
            throw 'Doom二次发生错误'
        }catch(error){
            alert('err')
        }
        return(

            <div></div>
        )
    }
  }

class Home extends React.Component{
    // handButton= () =>{
    //     throw '点击事件发生错误'
    // }
    // 点击事件不能用这个错误边界
    render(){
        return(
            <div>
                <Doom/>
                {/* <button onChange={this.handButton}>点击</button> */}
            </div>
        )
    }
}

  class App extends React.Component{
    render(){
        return(
            <div>
            <ErrorBoundary>
                <Home></Home>
            </ErrorBoundary>
            <span>这是错误组件之后的内容</span>
            </div>
            
        )
    }
  }
export default App

    //   有一点问题